Skip to main content

🌐 HTML en React Three Fiber (R3F)

En React Three Fiber (R3F), podemos agregar texto o elementos HTML dentro de nuestra escena utilizando la etiqueta <Html> de la librería @react-three/drei.

📦 Instalación:

npm install @react-three/drei

📌 Uso básico de <Html>​

import { Canvas } from "@react-three/fiber";
import { Html } from "@react-three/drei";

export default function App() {
  return (
    <Canvas>
      <mesh position={[0, 0, 0]}>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="blue" />

        {/* HTML dentro de la escena */}
        <Html>
          <div style={{ background: "white", padding: "10px", borderRadius: "5px" }}>
            ¡Hola, soy HTML dentro de Three.js!
          </div>
        </Html>
      </mesh>
    </Canvas>
  );
}

🔹 Propiedades importantes de <Html>​

1️⃣ transform​

📌 Permite que el HTML se ajuste a la escala de los objetos en la escena.

<Html transform>
  <div style={{ color: "black" }}>Escala ajustada</div>
</Html>

🔹 Sin transform, el HTML mantiene su tamaño fijo.

2️⃣ occlude​

📌 Hace que el HTML tenga un fondo transparente y se oculte si está detrás de otros objetos.

<Html occlude>
  <div style={{ background: "white" }}>Oculto detrás de objetos</div>
</Html>

🔹 Para ocultarlo dependiendo de elementos específicos, usamos referencias:

const cubeRef = useRef();
<Html occlude={[cubeRef]}>
  <div>Solo visible si no está detrás del cubo</div>
</Html>

3️⃣ wrapperClass​

📌 Define la clase del elemento padre para manipulación con CSS.

<Html wrapperClass="mi-clase">
  <div>Elemento con clase CSS</div>
</Html>

🔹 Esto permite estilizar el elemento con CSS:

.mi-clase {
  font-size: 20px;
  color: red;
}

4️⃣ center​

📌 Centra el contenido HTML tomando su pivote como referencia.

<Html center>
  <div>Texto centrado</div>
</Html>

🔹 Útil para etiquetas de texto alineadas con objetos 3D.

5️⃣ distanceFactor​

📌 Ajusta el tamaño del HTML cuando la cámara se acerca o aleja.

<Html distanceFactor={10}>
  <div>Texto con escala ajustada</div>
</Html>

🔹 Valores altos mantienen el texto más estable en la escena.

✅ Consideraciones​

🔹 El HTML siempre aparece sobre otros elementos. Para ocultarlo dinámicamente, usa occlude.
🔹 Si necesitas evitar que HTML bloquee otros elementos, puedes manejar su visibilidad con referencias.

🚀 Resumen​

  • 📌 transform → Se ajusta a la escala de los objetos 3D.
  • 🛑 occlude → Hace que el HTML tenga fondo transparente y se oculte detrás de objetos.
  • 🎨 wrapperClass → Permite personalizar con CSS.
  • 🎯 center → Centra el HTML en su pivote.
  • 🔍 distanceFactor → Ajusta la escala del texto según la distancia de la cámara.

✨ Con estos conceptos, puedes integrar contenido HTML en tus escenas 3D de manera efectiva! 🚀